<template>
    <div class="container">
      <router-view></router-view>
       <div class="content">
      <ul>
       <router-link tag="li" :to="item.path" v-for = "(item, index) of list " :key = "index" ><!--此行代码用于跳转路由类似于（a标签）-->
      		<span :class="item.icon"></span>
            <p>{{item.name}}</p>
      	</router-link>
       </router-link>
      </ul>
      <ul>
       <router-link tag="li" :to="item.path" v-for = "(item, index) of list1 " :key = "index" ><!--此行代码用于跳转路由类似于（a标签）-->
      		<span :class="item.icon"></span>
            <p>{{item.name}}</p>
      	</router-link>
       </router-link>
      </ul>
      <ul>
       <router-link tag="li" :to="item.path" v-for = "(item, index) of list2 " :key = "index" ><!--此行代码用于跳转路由类似于（a标签）-->
      		<span :class="item.icon"></span>
            <p>{{item.name}}</p>
      	</router-link>
       </router-link>
      </ul>
      <ul>
       <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1544410949382&di=8b725d7bc67e6b0b04302b709bb8af42&imgtype=0&src=http%3A%2F%2Fimg.pconline.com.cn%2Fimages%2Fupload%2Fupc%2Ftx%2Fitbbs%2F1310%2F17%2Fc2%2F27591207_1381944138747_mthumb.jpg"/>
      </ul>
      <ul>
       <router-link tag="li" :to="item.path" v-for = "(item, index) of list3 " :key = "index" ><!--此行代码用于跳转路由类似于（a标签）-->
      		<span :class="item.icon"></span>
            <p>{{item.name}}</p>
      	</router-link>
       </router-link>
      </ul>
      <ul>
       <router-link tag="li" :to="item.path" v-for = "(item, index) of list4 " :key = "index" ><!--此行代码用于跳转路由类似于（a标签）-->
      		<span :class="item.icon"></span>
            <p>{{item.name}}</p>
      	</router-link>
       </router-link>
      </ul>
       </div>
    </div>
</template>
<script>
export default {
  data () {
    return {
      list: [{
        name: '邀请好友',
        icon: 'iconfont icon-tuijian',
        path: '/invited'
      }, {
        name: '优惠券',
        icon: 'iconfont icon-icon-test1',
        path: '/discount'
      }, {
        name: '积分',
        icon: 'iconfont icon-dingdan',
        path: '/shop'
      }],
      list1: [{
        name: '浏览收藏',
        icon: 'iconfont icon-shoucang',
        path: '/collect'
      }, {
        name: '芝麻信用',
        icon: 'iconfont icon-zmxy',
        path: '/sesame'
      }, {
        name: '我的故事',
        icon: 'iconfont icon-elfstorychris',
        path: '/mystory'
      }],
      list2: [{
        name: '开具发票',
        icon: 'iconfont icon-fapiao',
        path: '/invoice'
      }, {
        name: '收件地址',
        icon: 'iconfont icon-iconfontdizhi',
        path: '/address'
      }, {
        name: '金卡会员',
        icon: 'iconfont icon-huiyuan1',
        path: '/VIP'
      }],
      list3: [{
        name: '联系客服',
        icon: 'iconfont icon-kefu',
        path: '/customerservice'
      }, {
        name: '成为房东',
        icon: 'iconfont icon-fangzi',
        path: '/landloard'
      }, {
        name: '我的入住人',
        icon: 'iconfont icon-ren',
        path: '/mycustomer'
      }],
      list4: [{
        name: '意见反馈',
        icon: 'iconfont icon-62',
        path: '/feedback'
      },
      {
        name: '',
        icon: '',
        path: ''
      }, {
        name: '',
        icon: '',
        path: ''
      }]
    }
  },
mounted () {
	if(localStorage.getItem('isLogin') === 'ok' ) {
		  this.$router.push('/my/login')
	}else{
		 this.$router.push('/my/nologin')
	}
   }
}
</script>
<style lang="scss" scoped>
@import '@/lib/reset.scss';
.container{
	.content {
      @include flex(); 
      @include rect(100%, auto);
      @include overflow();
	 ul {
	 	margin-top:5px;
	    @include rect(100%, 0.71rem);
	    background:#eee;
	    @include flexbox();
    li {
      margin-top:0.1rem;
      @include flex();
      @include rect(auto,0.60rem);
      @include flexbox();
      @include flex-direction(column);
      @include align-items();
      justify-content:center;
      /*&.router-link-active{
        @include text-color(#f66);
      }*/
      span {
       font-size:22px;
       height:36px;
      }
      p {

      }
    }
  }
 }
}
</style>

